<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条纹背景</title>
  <style>
    .gradient-box {
      width: 300px;
      height: 300px;
      margin: 10px;
      display: inline-block;
      /* background-repeat: no-repeat; */
      outline: 1px solid red;
    }

    .box1 {
      background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
      background-size: 100% 30px;
    }

    .box2 {
      background: linear-gradient(to right,#fb3 50%, #58a 0);
      background-size: 30px 100%;
    }
    .box3 {
      background: linear-gradient(45deg,#fb3 50%, #58a 0);
      background-size: 30px 30px;
    }
    .box3-1 {
      background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
      background-size: 42px 42px;
    }
    .box4 {
      /* background: repeating-linear-gradient(60deg, #fb3, #fb3 15px,#58a 0, #58a 30px) */
      background: repeating-linear-gradient(60deg, #fb3 0 15px,#58a 0 30px)
    }
  </style>
</head>
<body>
  <div class="gradient-box box1"></div>
  <div class="gradient-box box2"></div>
  <div class="gradient-box box3"></div>
  <div class="gradient-box box3-1"></div>
  <div class="gradient-box box4"></div>
</body>
</html>
